// pages/getcoupon/getcoupon.js
import QRCode from '../../utils/weapp-qrcode.js'
const host = require('../../config.js').host;
const network = require('../../utils/network.js');
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    host: host,
    userInfo: {},
    info: {
      deduction:8888.88
    }
  },

  /**
   * 获取信息
   */
  getCoupon(id) {
    let that = this;
    let userInfo = that.data.userInfo;
    // var ownerAddressName = wx.getStorageSync('ownerAddressName');
    
    network.requestGet('/xcx/goods/' + id, {}, res => {
      if (res.data.code == '200') {
        let retData = res.data.data;

        new QRCode('myQrcode_', {
          text: retData.id + "",
          width: 250,
          height: 250,
          padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
          callback: res => {
            retData.qrCode = res.path
            // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
            
            let qrImg = res.path;
            const ctx = wx.createCanvasContext('myQrcode');
            ctx.fillStyle="rgb(245, 246, 251)";
            ctx.fillRect(0,0,750,1150);

            ctx.strokeStyle = "rgb(255, 255, 255)";
            ctx.fillStyle = "rgba(255, 255, 255, 1)";
            that.roundRect(ctx, 30, 20, 310, 310, 10, 'rgba(255,255,255,0)');
            
            ctx.fillStyle = "#000000"
            ctx.font = "small-caps bold 13px arial";
            ctx.fillText('扫描二维码领取', 140, 46)
            ctx.drawImage(qrImg, 58, 50, 250, 250);
            ctx.fillStyle = "gray"
            ctx.fillText('每人限领一张', 140, 320)
            ctx.stroke();

            ctx.strokeStyle = "rgb(255, 255, 255)";
            ctx.fillStyle = "rgba(255, 255, 255, 1)";
            that.roundRect(ctx, 30, 350, 310, 100, 10, 'rgba(255,255,255,0)');

            ctx.fillStyle = "#FF773D"
            ctx.fillText('￥', 50, 398)
            ctx.font = "small-caps bold 18px arial";
            // ctx.fillText(retData.deduction, 64, 398)
            ctx.fillText(8888.88, 64, 398)
            ctx.font = "small-caps bold 14px arial";
            ctx.fillText("代金券", 50, 420)

            ctx.fillStyle = "#000000"
            ctx.font = "small-caps bold 16px arial";
            ctx.fillText(retData.name, 120, 380)

            ctx.fillStyle = "gray"
            ctx.font = "small-caps bold 12px arial";
            ctx.fillText("剩余张数", 120, 405)
            ctx.font = "small-caps bold 12px arial";
            ctx.fillText("有效期至", 120, 430)

            ctx.fillStyle = "#000000"
            ctx.font = "small-caps bold 12px arial";
            ctx.fillText(retData.totalStock + "张", 180, 405)
            ctx.font = "small-caps bold 12px arial";
            ctx.fillText(retData.expiryDate, 180, 430)


            ctx.strokeStyle = "rgb(255, 255, 255)";
            ctx.fillStyle = "rgba(255, 255, 255, 1)";
            that.roundRect(ctx, 30, 470, 310, 78, 10, 'rgba(255,255,255,0)');

            ctx.fillStyle = "gray"
            ctx.font = "small-caps bold 14px arial";
            ctx.fillText("联系电话", 50, 500)
            ctx.font = "small-caps bold 14px arial";
            ctx.fillText("店铺地址", 50, 530)

            ctx.fillStyle = "#000000"
            ctx.font = "small-caps bold 12px arial";
            ctx.fillText(userInfo.ownerPhone ? userInfo.ownerPhone : '', 120, 500);
            ctx.font = "small-caps bold 12px arial";
            ctx.fillText(userInfo.ownerAddressName, 120, 530);

            // ctx.draw();

            //绘制图像到画布
            //渲染
            ctx.draw(false, () => {
              //需要把canvas转成图片后才能保存
              wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: 600,
                height: 750,
                destWidth: 1200, //2倍关系
                destHeight: 1800, //2倍关系
                canvasId: 'myQrcode',
                success: function (res) {
                  
                  that.setData({
                    //关键 赋值给变量
                    shareImgSrc: res.tempFilePath
                  })
                  setTimeout(() => {
                    
                  }, 1000)

                },
                fail: function (res) {

                }
              })
            })


            // 画布结束

          }
        })

        this.setData({
          info: retData
        })

      } else {
        wx.showToast({
          title: res.data.msg,
          icon: 'none'
        })
      }
    })
  },
  savePage() {
    var that = this;
    wx.showLoading({
      title: '生成中',
    })
    
    wx.saveImageToPhotosAlbum({
      //shareImgSrc为canvas赋值的图片路径
      filePath: that.data.shareImgSrc,
      success(res) {
        wx.hideLoading()
        wx.showModal({
          title: '保存成功',
          content: '图片成功保存到相册',
          showCancel: false,
          confirmText: '确认',
          confirmColor: '#21e6c1',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            }
          }
        })
      }
    })
  },
  roundRect(ctx, x, y, width, height, radius, fill, stroke) {
    if (typeof stroke == 'undefined') {
      stroke = true;
    }
    if (typeof radius === 'undefined') {
      radius = 5;
    }
    if (typeof radius === 'number') {
      radius = {
        tl: radius,
        tr: radius,
        br: radius,
        bl: radius
      };
    } else {
      var defaultRadius = {
        tl: 0,
        tr: 0,
        br: 0,
        bl: 0
      };
      for (var side in defaultRadius) {
        radius[side] = radius[side] || defaultRadius[side];
      }
    }
    ctx.beginPath();
    ctx.moveTo(x + radius.tl, y);
    ctx.lineTo(x + width - radius.tr, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
    ctx.lineTo(x + width, y + height - radius.br);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
    ctx.lineTo(x + radius.bl, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
    ctx.lineTo(x, y + radius.tl);
    ctx.quadraticCurveTo(x, y, x + radius.tl, y);
    ctx.closePath();
    if (fill) {
      ctx.fill();
    }
    if (stroke) {
      ctx.stroke();
    }

  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    // let userInfo = app.globalData.userInfo;
    let userInfo ={};// app.globalData.userInfo;
    // userInfo.ownerAddressName =  wx.getStorageSync('ownerAddressName')
    // userInfo.ownerPhone = wx.getStorageSync('ownerPhone')
    userInfo.ownerAddressName = 'di的顶顶顶顶顶';  // wx.getStorageSync('ownerAddressName')
    userInfo.ownerPhone = '18312341234'; //  wx.getStorageSync('ownerPhone')
    wx.getSystemInfo({
      success(res) {
        that.setData({
          deviceWidth: res.windowWidth,
          deviceHeight: res.windowHeight
        })
      }
    })
    this.setData({
      userInfo: userInfo
    })
    
    // this.getCoupon(options.id);
    this.getCoupon(10);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})